<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>javascript objects</title>
	
	
	<script type="text/javascript">
	
	// global scope
	var globalVar = 1; 
	
	// 'this' used in global context always refers to the global object
	this.globalVar = 2;
	
	var myvar = "defined outside";
	
	// self executing function, all variables within here are private
	(function(){
		ini();
	})();
	
	
	function ini() {
		
	}
	
	function outer() {
		
		// no var keyword: Global Scope
		anotherGlobalVar = 10; 
		
		var outerVar = 2; // scope is within outer()
		
		function inner() {
			var innerVar = 3; // scope is within inner()
			console.log(globalVar);
			console.log(outerVar);
			console.log(innerVar);
		}
		
		inner();
	}
		
	function action01() {
		outer();
	}
	
		
	function action02() {
		
		var boat = {
			size:		'normal',
			boatInfo:	function() {
				console.group();
				console.log( this === boat );
				console.log( this.size );
				console.groupEnd();
			}
		};
		boat.boatInfo(); 	// true, 'normal'
		
		var bigBoat = {
			size: 'big'
		};
		
		bigBoat.boatInfo = boat.boatInfo;
		
		bigBoat.boatInfo(); // false, 'big'
	}
	
	
	function action03() {
		
		anum = 0; // no 'var' keyword means it belongs to the global scope
		
		var foo = {
			anum:  10,
			baz: {
				anum: 20,
				bar: function() { // this function belong to the baz object
					console.log(this.anum);
				}
			}
		};
		
		// 20 - because left side of () is bar, which belongs to baz object when invoked
		foo.baz.bar();
		
		var hello = foo.baz.bar;
		
		// 0 - because left side of () is hello, which belongs to global object when invoked
		hello();
	}
	
	function action04() {
		
		fn01 = function() {
			console.log('myvar holds: ' + myvar);
		};
		
		fn02 = function() {
			var myvar = 'defined inside action04';
			console.log('myvar holds: ' + myvar);
		};
		
		fn01();
		fn02();
	}
	
	
	function action05() {
		
	}
	
	function tmp() {
		console.log(anotherGlobalVar);
	}

	</script>

</head>



<body>
<form>
	<input type="button" value="bt01" onclick="action01()" />
	<input type="button" value="bt02" onclick="action02()" />
	<input type="button" value="bt03" onclick="action03()" />
	<input type="button" value="bt04" onclick="action04()" />
	<input type="button" value="bt05" onclick="action05()" />
	<input type="button" value="tmp"  onclick="tmp()" />
</form>
</body>



<script type="text/javascript">


</script>






</html>